<template>
  <PageWrapper
    class="high-form"
    title="添加图书"
    content="请填写图书信息，并提交表单。"
  >
    <a-card title="基本信息" :bordered="false">
      <BasicForm @register="register" />
    </a-card>
    <a-card title="上传电子书" :bordered="false" class="!mt-5">
      <BasicForm @register="registerTask" />
    </a-card>
    <a-card title="电子书目录" :bordered="false" class="!mt-5">
      <PersonTable ref="tableRef" :data="contentData" />
    </a-card>

    <template #rightFooter>
      <a-button type="primary" @click="submitAll"> 提交 </a-button>
    </template>
  </PageWrapper>
</template>
<script lang="ts">
  import { BasicForm, useForm } from '../../../components/Form';
  import { defineComponent, ref } from 'vue';
  import PersonTable from './PersonTable.vue';
  import { PageWrapper } from '../../../components/Page';
  import { schemas, taskSchemas, categoryOptionList, addBook, addContents } from './data';
  import { Card, message } from 'ant-design-vue';
  
  export default defineComponent({
    name: 'FormHightPage',
    components: { BasicForm, PersonTable, PageWrapper, [Card.name]: Card },
    setup() {
      const tableRef = ref<{ getDataSource: () => any } | null>(null);
      const contentData = ref([]);

      const [register, { validate, setFieldsValue, updateSchema, resetFields }] = useForm({
        layout: 'vertical',
        baseColProps: {
          span: 6,
        },
        schemas: schemas,
        showActionButtonGroup: false,
      });

      categoryOptionList(updateSchema)

      const [registerTask, { validate: validateTaskForm, resetFields: resetTaskFields }] = useForm({
        layout: 'vertical',
        baseColProps: {
          span: 6,
        },
        schemas: taskSchemas({ setFieldsValue, contentData }),
        showActionButtonGroup: false,
      });

      async function submitAll() {
        try {
          // if (tableRef.value) {
          //   console.log('table data:', tableRef.value.getDataSource());
          // }

          const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]);
          console.log('form data:', values, taskValues);
          await addContents(taskValues);
          await addBook(values);
          resetFields();
          resetTaskFields();
          contentData.value = [];
        } catch (error) {
          if (error.message.startsWith('Duplicate entry')) {
            message.error('电子书已存在，请勿重复添加');
          } else {
            message.error(error.message);
          }
        }
      }

      return { register, registerTask, submitAll, tableRef, contentData };
    },
  });
</script>
<style lang="less" scoped>
  .high-form {
    padding-bottom: 48px;
  }
</style>
